﻿*[data-jqc="holder"]
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 128px;
	height: 22px;
	display: inline-block;

	cursor: default;
	font: 1em Arial, Verdana, serf;
	z-index: 2;
}

*[data-jqc="holder"]:focus *[data-jqc="control"]
{
	background: Highlight;
	color: HighlightText;
}

*[data-jqc="control"]
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: relative;
	background: Window;
	border: 1px solid ActiveBorder; /*#e2e3ea*/
}

*[data-jqc="control"] *[data-jqc~="visible-value"]
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	padding: 0 0 2px 2px;
	overflow: hidden;
}
*[data-jqc="control"] *[data-jqc="open-button"]
{
	position: absolute;
	right: 0px;
	top: 0px;
	height: 20px;
	width: 14px;
	z-index: 4;
	background: url("../img/jqcmbx-arrow.png");
}
*[data-jqc="control"]:hover *[data-jqc="open-button"]
{
	background-position: 0 40px;
}
*[data-jqc="control"]:active *[data-jqc="open-button"]
{
	background-position: 0 20px;
}

*[data-jqc="control"] *[data-jqc="input"]
{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	visibility: hidden;
	background: transparent;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding-right: 15px;
	padding-left: 2px;

	border: 0 none transparent;
}

*[data-jqc="list-wraper"]
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	position: absolute;
	z-index: 5;
	background: white;
	border: 1px solid ActiveBorder;

	visibility: hidden;
	overflow: auto;
}

*[data-jqc="holder"] *[data-jqc="list"]
{
	border: 0 none transparent;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: auto;
	cursor: default;
}

*[data-jqc="holder"] ul[data-jqc="list"],
*[data-jqc="holder"] ol[data-jqc="list"]
{
	margin: 0px;
	padding: 0px;
	list-style-position: inside;
	list-style-type: none;
}

*[data-jqc="holder"] ul[data-jqc="list"] li,
*[data-jqc="holder"] ol[data-jqc="list"] li
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	line-height: 145%;
	padding-left: 2px;
}

*[data-jqc="holder"] *[data-jqc="list"] .active[data-jqc="item"]
{
	background: Highlight;
	color: HighlightText;
	overflow: hidden;
}

*[data-jqc="holder"] *[data-jqc="list"] *[data-jqc="item"]:hover
{
	background: Highlight;
	color: HighlightText;
}